<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>interface</title>
	<link rel="stylesheet" href="../css/interface.css">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
		integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
	<!-- nav -->
	<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
		<div class="container">
			<a href="#" class="navbar-brand">Management</a>
			<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navmenu">
				<span class="navbar-toggler-icon"></span>
			</button>
			<div class="collapse navbar-collapse" id="navmenu">
				<ul class="navbar-nav ms-auto">
					<li class="nav-item">
						<div class="nav-link">Part one</div>
					</li>
					<li class="nav-item">
						<div class="nav-link">Part two</div>
					</li>
					<li class="nav-item">
						<div class="nav-link">Part three</div>
					</li>
				</ul>
			</div>
		</div>
	</nav>
	<!-- sec one -->
	<section class="sec1 p-5 bg-dark text-light text-center text-md-start">
		<div class="container">
			<div class="d-flex">
				<div>
					<h1>Hello! <span class="text-warning showUsername"></span></h1>
					<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Libero accusamus ratione deserunt.
						Velit voluptatem quos quasi, eos quisquam nam accusantium?</p>
					<button class="btn btn-primary btn-lg getOut">log out</button>
				</div>
				<img class="w-50 d-none d-md-block" src="../img/cloudeRiver.png" alt="cloudeRiver">
			</div>
		</div>
	</section>
	<!-- sec two -->
	<section class="sec2 bg-primary text-light p-4">
		<div class="container">
			<div class="d-md-flex justify-content-between align-items-center">
				<h3 class="mb-2">Search For Data Server</h3>
				<div class="input-group news-input">
					<input type="text" class="form-control" placeholder="What you want">
					<button class="btn btn-dark btn-lg">Search</button>
				</div>
			</div>
		</div>
	</section>
	<!-- sec three -->
	<section class="sec3 p-5">
		<div class="container">
			<div class="row g-4">
				<div class="col-md">
					<div class="card bg-dark text-light text-center">
						<div class="card-body">
							<div class="card-title">
								Part One
							</div>
							<div class="card-text">
								Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita fugit modi suscipit
								eum quae delectus corrupti dolore voluptatibus veritatis quisquam!
							</div>
							<a href="#" class="btn btn-primary">DO It</a>
						</div>
					</div>
				</div>
				<div class="col-md">
					<div class="card bg-secondary text-light text-center">
						<div class="card-body">
							<div class="card-title">
								Part One
							</div>
							<div class="card-text">
								Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita fugit modi suscipit
								eum quae delectus corrupti dolore voluptatibus veritatis quisquam!
							</div>
							<a href="#" class="btn btn-dark">DO It</a>
						</div>
					</div>
				</div>
				<div class="col-md">
					<div class="card bg-dark text-light text-center">
						<div class="card-body">
							<div class="card-title">
								Part One
							</div>
							<div class="card-text">
								Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita fugit modi suscipit
								eum quae delectus corrupti dolore voluptatibus veritatis quisquam!
							</div>
							<a href="#" class="btn btn-primary">DO It</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<script src="../node_modules/axios/dist/axios.min.js"></script>
	<script src="../js/commen.js"></script>
	<script src="../js/interface.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
		integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
		crossorigin="anonymous"></script>
</body>

</html>